<template>
	<view>
		<view class="header-section">
			<view class="header-content">
				<text>消息中心</text>
			</view>
			<view class="header_right" @click="handleClear">
				<view class="menu-list iconfont icon-delete menu-icon" />
			</view>
		</view>
		<view class="content-section">
			<su-empty v-if="JSON.stringify(messageList) == '{}'" text="暂无数据" />
			<view v-else v-for="(data_list,key) in this.messageList" :key="key">
				<uni-section :title="key" class="content-card">
					<uni-card v-for="message in data_list" :key="message.title" class="content-uni-card">
						<view class="card" @click="handleVerify(message)">
							<view class="card-icon">
								<image v-if="message.noticeType == 1" src="@/static/images/message/branch.png"
									style="border-radius: 50px;" />
								<image v-else-if="message.noticeType == 2" src="@/static/images/message/supervise.png"
									style="border-radius: 50px;" />
								<image v-else src="@/static/images/message/platform.png" style="border-radius: 50px;" />
							</view>
							<view class="card-list">
								<view class="card-title">
									<text class="title">
										{{message.noticeTitle}}
									</text>
									<view class="title-time">
										<text>{{message.crate_time}}</text>
									</view>
								</view>
								<view class="card-content" v-if="message.orderNo != null">
									订单号：<text>{{message.orderNo}}</text>
								</view>
								<view class="card-content">
									通知内容：<text>{{message.noticeContent}}</text>
								</view>
								<view class="card-content">
									通知时间：<text>{{message.createTime}}</text>
								</view>
							</view>
						</view>
					</uni-card>
				</uni-section>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getNoticeMapByUser,
		updateNotice
	} from "@/api/repairManage/notice.js"
	import {
		updateOrder
	} from "@/api/repairManage/order.js"
	export default {
		data() {
			return {
				userId: this.$store.state.user.id,
				messageList: undefined,
			}
		},
		// created() {
		// 	this.getMssage()
		// },
		onLoad() {
			console.log("页面加载刷新");
			this.getMssage();
		},
		created() {
			this.getMssage()
		},
		onPullDownRefresh() {
			console.log("============== 下拉 ==============");
			this.getMssage();

		},
		methods: {
			getMssage() {
				console.log("获取消息列表");
				getNoticeMapByUser().then((res) => {
					this.messageList = res.data
					uni.stopPullDownRefresh();
				}).catch((err) => {
					console.log(err);
				})
			},
			// 确认接受订单
			handleVerify(item) {
				console.log("====== 确认接受订单 ====== ");
				console.log(item);
				const noticeId = item.noticeId
				const orderId = item.orderId
				const orderNo = item.orderNo
				const readStatus = item.readStatus
				const noticeType = item.noticeType
				if (orderId != undefined && orderNo != undefined && readStatus == '0' && noticeType == "1") {
					uni.showModal({
						title: '确定签收',
						content: `确定收到订单 ${orderNo}`,
						success: (res) => {
							if (res.confirm) {
								updateNotice({
									"noticeId": noticeId,
									"readStatus": "1"
								});
								updateOrder({
									"orderId": orderId,
									"assignedStatus": "2"
								}).then(res => {
									this.getMssage();
								})
							}
						},
					})
				}
			},

			// 清除消息按钮
			handleClear() {
				console.log("清除消息");
				this.messageList = {}
			},

			//点击消息
			handleMessage(res) {
				console.log(res);
				this.$modal.showToast('模块建设中~')
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #E5E7EB;
		// background-size: cover;
		// box-sizing: border-box;
		width: 100%;
		height: 100%;
	}

	.header-section {
		position: fixed;
		z-index: 9999;
		width: 100%;
		height: 5%;
		background-color: #FFFFFF;
		padding-top: 2%;
		padding-bottom: 2%;
		display: inline-block;
		overflow-y: hidden;
		border-bottom: 1px solid #dedede;

		.header-content {
			margin: 0 auto;
			text-align: center;

			text {
				font-family: Roboto;
				font-size: 18px;
				font-feature-settings: "kern" on;
				color: #000000;
			}
		}

		.header_right {
			position: absolute;
			top: -5%;
			right: 2%;
			// color: #007AFF;
			// font-size: 16px;
			// display: flex;
			// right: 10%;
			// width: 20px;
			// height: 20px;
			// opacity: 1;
		}
	}

	.content-section {
		padding-top: 10%;
		padding-bottom: 10%;
		position: relative;
		width: 100%;
		overflow-y: scroll;

		.content-card {
			position: relative;
			width: 100%;
			padding-bottom: 1%;

			.content-uni-card {
				margin: 1%;
				position: relative;


				.card {
					position: relative;
					display: inline-flex;
					margin-top: 10px;
					margin-bottom: 10px;
					width: 100%;

					.card-icon {
						display: flex;
						justify-content: center;
						/* 水平居中 */
						align-items: center;
						/* 垂直居中 */
						position: relative;
						width: 15%;
						height: 15%;
						margin: auto;

						image {
							display: inline-block;
							margin: auto;
							width: 40px;
							height: 40px;
						}

					}

					.card-list {
						position: relative;
						width: 100%;

						.card-title {
							width: 100%;
							position: relative;
							display: inline-flex;

							.title {
								font-size: 16px;
								font-family: Georgia, serif;
								/* 设置段落文本为粗体 */
								font-weight: bold;
								font-feature-settings: "kern" on;
								color: #4B5563;

							}

							.title-time {
								position: absolute;
								top: -0%;
								right: -0%;
								font-feature-settings: "kern" on;
								color: #9CA3AF;
							}
						}

						.card-content {
							word-wrap: break-word;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}

			/* 奇数行 */
			.content-uni-card:nth-child(odd) {
				background-color: #DBEAFE;
				/* 浅色背景 */
			}

			/* 偶数行 */
			.content-uni-card:nth-child(even) {
				background-color: #FFEDD5;
			}

		}
	}
</style>